<template>
     <div class="edu-page-warp" v-if="isStudent">
        <el-card shadow="never">
            <div class="edu-page-title">基本信息</div>
            <el-form label-suffix="：" label-width="120px" style="margin-top:20px">
                <el-row>
                    <el-col :span="8" >
                        <el-form-item label="入学时间">{{queryForm.enrollmentDate}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="离校时间">{{queryForm.offSchool}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结业年份">{{queryForm.completionYear}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结业状态">{{queryForm.status}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结业证书编号">{{queryForm.certificateNo}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="专业">{{queryForm.majorI18n}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="queryForm.file">
                    <el-col :span="8">
                        <el-form-item label="下载">
                            <el-button type="text" @click="handleDownFile">综合成绩排名</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card shadow="never">
            <div v-if="!congratulation" class="edu-page-title">填报志愿</div>
            <div v-else style="text-align:center;" class="photo">
                <img src="/static/images/enroll_status_logo.png" class="enroll-logo" />
                <div class="enroll-notice">预科毕业录取通知</div>              
                <div style="padding-top: 10%;">
                    <div v-html="successMsg" class="congratulateClass">
                    </div>
                </div>
            </div>
            <!--错误提示-->
            <div v-if="errorMsg">
                <p style="text-align:center;color:red;margin:50px">{{errorMsg}}</p>
            </div>
            <!--填报志愿开放-->
            <div v-if="isOpen">
                <el-form label-suffix="：" label-width="200" style="margin-left:50px" ref="form1" :model="form" id="form1">
                    <el-row v-for="(row,index) in form.list" :key="index">
                        <el-col>
                            <el-form-item :label="row.label" :rules="[{required: true,
                                message: $t('message.plzSelect'),
                                trigger: 'change'}]" :prop="'list.'+index+'.value'">
                                <el-select style="width:400px" v-model="row.value" :disabled="isDisabled" @change="changeItem" clearable>
                                    <el-option v-for="(option,index_) in row.options" :key="index_" :label="option.label" :value="option.value" >
                                        <span style="float: left">{{ option.label }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">计划招生 {{ option.num }} 人</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                         <el-col>
                            <el-form-item label="联系电话" prop="telephone" :rules="[{required: true,
                                message: $t('inputPlaceholder'),
                                trigger: 'change'}]">
                                <el-input style="width:400px"  v-model="form.telephone" :placeholder="$t('inputPlaceholder')" maxlength="20" :disabled="isDisabled"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                         <el-col>
                            <el-form-item label="联系地址" prop="address" :rules="[{required: true,
                                message: $t('inputPlaceholder'),
                                trigger: 'change'}]">
                                <el-input style="width:400px" v-model="form.address" :placeholder="$t('inputPlaceholder')" maxlength="100" :disabled="isDisabled"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="!isDisabled">
                        <el-col style="padding-left:80px;color:red">
                            *请学生仔细核对邮寄地址，如有问题会影响到录取通知书的邮寄
                        </el-col>
                    </el-row>
                     <el-row v-if="!isDisabled">
                        <el-col style="padding-left:80px;margin-top:20px">
                            <el-button @click="cancel">{{$t('message.reset')}}</el-button>
                            <el-button @click="confirm" type="primary">{{$t('message.confirm')}}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
    <div v-else>
        <teacherEnroll />
    </div>
</template>
<script>
import * as APIs from "common/src/api/preparatoryGraduation/enroll"
import mixin from 'common/src/mixins/index';
import teacherEnroll from './teacherEnroll'
   export default {
    name: "studentRecruit",
    mixins: [mixin],
    components:{
        teacherEnroll
    },
    data() {
        return {
           isStudent:true,
           isOpen:false,    //是否开放填报权限
           errorMsg:null,
           isDisabled:true,
           form:{
                list:[],
                telephone:null,
                address:null
           },
           majors:null,  //志愿专业
           queryForm:{
               enrollmentDate:null,
               completionYear:null,
               certificateNo:null,
               offSchool:null,
               status:null,
               grade:null,
               majorI18n:null,
               file:null
           },
           status:[{
               label:'未结业',value:1,
           },{
               label:'已结业',value:2,
           },{
               label:'退回生源地',value:3,
           }],
           congratulation:false
        }
    },
    mounted(){
        if(!this.global.isStudent){
            if(this.global.isAdmin){
                this.isStudent=false;
            }
            this.errorMsg="当前用户不是学生,无法填报志愿"
            return;
        }
        //当前学生是否已结业
        APIs.getGraduationInfo(this.global.currentUser.uid).then(res=>{
            if(res.code==200){
                if(res.data){
                     //绑定信息
                    this.queryForm.grade=res.data.grade;                                        
                    this.queryForm.enrollmentDate=res.data.enrollmentDate;
                    this.queryForm.majorI18n=res.data.majorI18n;
                    this.queryForm.status=this.status[0].label;
                    if(res.data.publish=='1'){
                        this.queryForm.completionYear=res.data.completionYear;
                        this.queryForm.certificateNo=res.data.certificateNo;
                        this.queryForm.offSchool=res.data.offSchool;                        
                        let option=this.status.find(s=>s.value==res.data.status)
                        if(option){
                            this.queryForm.status=option.label
                        }
                    }                    
                    this.getDetail();
                }
            }
        });
        APIs.getAuthority().then(res=>{
            if(res.code==200&&res.data){
                this.queryForm.file=res.data.file;
            }
        })
    },
    methods:{
        convertNum(n){
            if(n<=0||n>10){
                throw "valid error"
            }
            let arr=['','一','二','三','四','五','六','七','八','九','十']
            return '志愿'+arr[n]
        },
        //获取填报志愿列表
        getMajorList(){
            APIs.getOfferedProfession({studentCode:this.global.currentUser.uid}).then(res=>{
                if(res.code==200){
                    this.majors=res.data.map(m=>{
                        return {
                            label:m.professionName+" ("+m.profession+")",
                            value:m.profession,
                            num:m.professionNumber
                        }
                    })
                    this.form.list.forEach(item=>{
                        item.options=_.cloneDeep(this.majors);
                    });
                }
            })
        },
        cancel(){
            this.form.telephone=null;
            this.form.address=null;
            this.form.list.forEach(row=>{
                row.value=null;
                row.options=_.cloneDeep(this.majors);
            })
            this.$nextTick(()=>{
                this.$refs.form1.clearValidate();
            })
        },
        confirm(){
            this.$refs.form1.validate(valid=>{
                if(valid){
                    //校验是否存在重复志愿
                    let s=new Set();
                    this.form.list.forEach(x=>s.add(x.value))
                    if(s.size!= this.form.list.length){
                        this.$message({
                            type: "warning",
                            message: "志愿不能重复"
                        });
                        return;
                    }
                    this.$eduConfirm(
                        "是否确定要提交志愿?",
                        this.$t("message.prompt"),
                        {
                            confirmButtonText: this.$t(
                                "message.yes"
                            ),
                            cancelButtonText: this.$t(
                                "message.no"
                            )
                        }
                    ).then(() => {
                        let param={
                            grade:this.queryForm.grade,
                            studentCode:this.global.currentUser.uid,
                            studentName:this.global.currentUser.name,
                            telephone:this.form.telephone,
                            address:this.form.address,
                            list:[]
                        };
                        this.form.list.forEach((major,index_)=>{
                            let m = major.options.find(item => item.value === major.value)
                            param.list.push({
                                level:index_+1,
                                choice:major.value,
                                choiceName:m?m.label:null
                            })
                        })
                        APIs.addStudentVolunteer(param).then(res=>{
                            if(res.code==200){
                                this.$message({
                                    type: "success",
                                    message: "志愿填报成功"
                                });                                
                            }
                        });
                    });
                }
            })
        },
        //获取志愿填报时间与开关信息
        getAuthority(data){            
            APIs.getAuthority().then(res=>{
                if(res.code==200){
                    if(res.data){
                        let startTime=moment(res.data.startTime).valueOf();
                        let endTime=moment(res.data.endTime).valueOf();
                        let now=(new Date()).valueOf();
                        if(now>=startTime&&now<=endTime&&res.data.isopen==1){
                            this.isOpen=true;
                            this.isDisabled=false;
                            if(this.form.list.length==0){
                                let number=res.data.choiceNumber;
                                //不超过10个，默认是3个
                                if(number>10){
                                    number=10;
                                }
                                for(let i=1;i<=number;i++){
                                    this.form.list.push({
                                        label:this.convertNum(i),
                                        value:null,
                                        options:null
                                    })
                                }
                            }                            
                            this.getMajorList();
                            return;
                        }
                        
                        if(data){
                            this.isOpen=true;
                            this.getMajorList();   
                            return;                        
                        }
                    }
                    this.errorMsg="提示：志愿填报暂未开放";
                }
            })
        },
        getDetail(){
            APIs.getOne({studentCode:this.global.currentUser.uid}).then(res=>{
                if(res.code==200){
                    //是否填写志愿
                    if(res.data){
                        //是否被录取
                        if(res.data.admissionProfession&&res.data.publish=='1'){
                            this.congratulation=true;
                            this.successMsg=`${res.data.studentName}同学，恭喜您已被我校<b style='color:red;font-size:20px;margin:5px'>${res.data.admissionProfessionName}专业</b>录取!`;
                            return;
                        }
                        //绑定填报信息
                        this.form.telephone=res.data.telephone;
                        this.form.address=res.data.address;
                        res.data.list.map((major,index)=>{
                            this.form.list.push({
                                label:this.convertNum(index+1),
                                value:major.choice,
                                options:null
                            })
                        });
                    } 
                    this.getAuthority(res.data);
                }
            })
        },
        changeItem(){        
            let selectedValue=[];
            this.form.list.forEach(item=>{
                if(item.value){
                    selectedValue.push(item.value);
                }
            })
            this.form.list.forEach(item=>{
                item.options=this.majors.filter(m=>!selectedValue.includes(m.value)||item.value==m.value);    
            })
        },
        handleDownFile(){
             window.location.href = "/api/commonservice/obsfile/downloadfile?objectkey=" +this.queryForm.file;
        }
    }
   }
</script>
<style lang="scss" scoped>
#form1 ::v-deep .el-form-item__error{
    margin-left:80px;
}
.photo {
  background: url("/static/images/enroll_status_background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  min-height: 680px;
  min-width: 100%;
  background-position-y: 0px;
  background-size: 100% 100%;
  .enroll-logo {
    height: 60px;
    width: 250px;
    margin-top: 5%;
  }
  .enroll-notice{
    color: #1f5492;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 3pt;
    margin-top:10px;
  }
  .congratulateClass {
    font-family: cursive;
    font-size: x-large;
    }
}
</style>
